<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">			
		<title>scrollTop 移动端检测</title>
	</head>
	<style type="text/css">
		#box{
			position: relative;
			height: 500px;
			width: 100%;
			overflow: auto;
		}
	</style>
	<body>
		<div id="box">
			<div id="content">
				<p>1</p>
				<p>2</p>
				<p>3</p>
				<p>4</p>
				<p>5</p>
				<p>6</p>
				<p>7</p>
				<p>8</p>
				<p>9</p>
				<p>10</p>
				<p>11</p>
				<p>12</p>
				<p>13</p>
				<p>14</p>
				<p>15</p>
				<p>16</p>
				<p>17</p>
				<p>18</p>
				<p>19</p>
				<p>20</p>
				<p>21</p>
				<p>22</p>
				<p>23</p>
				<p>24</p>
				<p>25</p>
				<p>26</p>
				<p>27</p>
				<p>28</p>
				<p>29</p>
				<p>30</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById("box");
		console.log(box);
		alert(box.scrollTop)
		setTimeout(function(){
			alert(box.scrollTop=-100);
			setTimeout(function(){
				alert(box.scrollTop=100);				
			}, 2000);
		}, 2000);
	</script>
</html>